<!DOCTYPE html>
<html lang="en">
<head>
<title>table表格</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="HTML, CSS, js">
<meta name="author" content="poya, dj, view Easy-UI">
<meta property="og:url" content="">
<meta property="og:title" content="EasyUI">

<link href="../assets/css/reset.css" rel="stylesheet" type="text/css" />
<link href="../assets/js/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../assets/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/css/layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	.panel{
		width:49%;
		float:left;
		margin-left:10px;
		margin-bottom: 10px;
	}
	.comTable{
		width:49%;
		height:220px;
		float:left;
	}
	.align-right{
		text-align:right;
	}
</style>
</head>
<body class="padding10">
<div class="easyui-panel comTable" title="可视标题表格" data-options="iconCls:'fa fa-save',collapsible:true,maximizable:true,closable:true">
	<p>为任意 <code>&lt;table&gt;</code> 标签添加 <code>.table</code> 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。</p>
	<table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>姓名</th>
            <th>用户邮箱</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
    </table>
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table"</span><span class="nt">&gt;</span> ... <span class="nt">&lt;/table&gt;</span></code></pre>
</div>
<div class="easyui-panel comTable" title="列宽由表格宽度和列宽度设定" data-options="iconCls:'fa fa-save',collapsible:true,maximizable:true,closable:true">
	<p>通过 <code>.table-fixed</code> 类可以给 <code>&lt;tbody&gt;</code> 列宽由表格宽度和列宽度设定。</p>
	<table class="table table-fixed">
        <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>姓名</th>
            <th>用户邮箱</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
	</table>
	<pre class="lintHeight"><code data-lang="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table table-fixed"</span><span class="nt">&gt;</span> ... <span class="nt">&lt;/table&gt;</span></code> </pre>
</div>
<div class="easyui-panel comTable" title="鼠标状态表格" data-options="iconCls:'fa fa-save',collapsible:true,maximizable:true,closable:true">
	<p>通过 <code>.table-hover</code> 类可以给 <code>&lt;table&gt;</code> 列宽由表格宽度和列宽度设定。</p>
	<table class="table table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>姓名</th>
            <th>用户邮箱</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@zhanghong</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
    </table>
    <h5>实例代码</h5>
    <pre class="lintHeight"><code data-lang="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table table-hover"</span><span class="nt">&gt;</span> ... <span class="nt">&lt;/table&gt;</span></code></pre>
</div>
<div class="easyui-panel comTable" title="带边框的表格" data-options="iconCls:'fa fa-save',collapsible:true,maximizable:true,closable:true">
	<p>通过 <code>.table-bordered</code> 类可以给 <code>&lt;table&gt;</code> 表格和其中的每个单元格增加边框。</p>
	<table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>姓名</th>
            <th>用户邮箱</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
    </table>
    <h5>实例代码</h5>
    <pre class="lintHeight"><code data-lang="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table table-bordered"</span><span class="nt">&gt;</span>  ... <span class="nt">&lt;/table&gt;</span></code> </pre>
</div>
<div class="easyui-panel comTable" title="文字溢出隐藏" data-options="iconCls:'fa fa-save',collapsible:true,maximizable:true,closable:true">
	<p>通过 <code>.table-fixed</code> 类可以给 <code>&lt;table&gt;</code> 表格实现文字溢出隐藏文字，当对象内文本溢出时显示省略标记(...)。</p>
	<table class="table table-hover table-bordered table-fixed">
        <thead>
          <tr>
            <th style="max-width:25px;width:25px;">#</th>
            <th>名称</th>
            <th>姓名</th>
            <th>用户邮箱</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>最好的offer是哪</td>
            <td>有了户口，起码人家不用等两年后工作居住证下来再买房子，不用交孩子上学的赞助费，光看这两年房子涨的速度，也抵得上你在百度干个5年10年了。 </td>
            <td>liumin@126.com</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>合码农发展的，薪水也高的</td>
            <td>再次是哪？BAT普通offer？NO，银行IT等</td>
            <td>163@fat。com</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>其次是哪？国内互联网的顶级offer</td>
            <td>t每到年底、年初，互联网公司总会迎来一拨校招的拒offer、毁约高潮，为啥？因为各个银行软开、科技部等发offer了</td>
            <td>djcbpl@offer.com</td>
          </tr>
        </tbody>
    </table>
    <h5>实例代码</h5>
    <pre class="lintHeight"><code data-lang="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table table-fixed"</span><span class="nt">&gt;</span>  ... <span class="nt">&lt;/table&gt;</span></code> </pre>
</div>
<div class="easyui-panel comTable" title="每行增加边框" data-options="iconCls:'fa fa-save',collapsible:true,maximizable:true,closable:true">
	<p>隔行换色表格又称条纹状表格，view UI通过 <code>.table-striped</code> 类可以给 <code>&lt;table&gt;</code> 表格和其中的行增加隔行换色效果。条纹状表格是依赖 <code>:nth-child</code>CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。</p>
	<table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>姓名</th>
            <th>用户邮箱</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>View UI</td>
            <td>the Bird</td>
            <td>@gogl</td>
          </tr>
        </tbody>
    </table>
    <h5>实例代码</h5>
    <pre class="lintHeight"><code data-lang="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table table-ash"</span><span class="nt">&gt;</span> ... <span class="nt">&lt;/table&gt;</span></code>
    </pre>
</div>
<div class="easyui-panel comTable" title="添加checkbox选择的table" data-options="iconCls:'fa fa-save',collapsible:true,maximizable:true,closable:true">
	<table class="table table-striped table-bordered table-hover">
	    <thead>
	      <tr>
	        <th class="checkbox-wh"><input type="checkbox" id="checkAll" /></th>
	        <th>名称</th>
	        <th>姓名</th>
	        <th>用户邮箱</th>
	      </tr>
	    </thead>
	    <tbody>
	      <tr>
	        <th scope="row"><input type="checkbox" name="subBox" /></th>
	        <td>Mark</td>
	        <td>Otto</td>
	        <td>@mdo</td>
	      </tr>
	      <tr>
	        <th scope="row"><input type="checkbox" name="subBox" /></th>
	        <td>Jacob</td>
	        <td>Thornton</td>
	        <td>@fat</td>
	      </tr>
	      <tr>
	        <th scope="row"><input type="checkbox" name="subBox" /></th>
	        <td>Larry</td>
	        <td>the Bird</td>
	        <td>@twitter</td>
	      </tr>
	      <tr>
	        <th scope="row"><input type="checkbox" name="subBox" /></th>
	        <td>View UI</td>
	        <td>the Bird</td>
	        <td>@gogl</td>
	      </tr>
	    </tbody>
	</table>
	<h5>实例代码</h5>

	<pre class="lintHeight"><code data-lang="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table table-ash"</span><span class="nt">&gt;</span> ... <span class="nt">&lt;/table&gt;</span></code>
	</pre>
</div>
<div class="easyui-panel comTable" title="每行增加边框" data-options="iconCls:'fa fa-save',collapsible:true,maximizable:true,closable:true">
	<p>横线条的表格是通过 <code>.table-ash</code> 类可以给 <code>&lt;table&gt;</code> 表格和其中的每行增加边框。</p>
	<table class="table table-hover table-ash">
        <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>姓名</th>
            <th>用户邮箱</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
          <tr>
            <th scope="row">5</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
    </table>
    <h5>实例代码</h5><pre class="lintHeight"><code data-lang="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table table-ash"</span><span class="nt">&gt;</span>... <span class="nt">&lt;/table&gt;</span></code>
</div>
<div class="easyui-panel comTable" title="综合示例" data-options="iconCls:'fa fa-save',collapsible:true,maximizable:true,closable:true">
	<p> 通过 <code>table、table-hover、table-bordered、table-striped</code> 类可以给 <code>&lt;table&gt;</code> 鼠标悬停、边框、隔行换色等等效果。</p>
	<table class="table table-hover table-bordered table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>名称</th>
            <th>姓名</th>
            <th>用户邮箱</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
    </table>

    <h5>实例代码</h5><pre class="lintHeight"><code data-lang="html"><span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"table table-hover table-bordered table-striped"</span><span class="nt">&gt;</span> ...<span class="nt">&lt;/table&gt;</span></code></pre>
</div>
<script src="../assets/js/jquery2.1.1.js" type="text/javascript"></script>
<script src="../assets/js/jquery.easyui.min.js" type="text/javascript"></script>
</body>
</html>